<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="姓名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="userName">
              <a-input v-model="model.userName" placeholder="请输入姓名"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="性别" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="userSex">
              <j-dict-select-tag type="list" v-model="model.userSex" dictCode="sex" placeholder="请选择性别" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="年龄" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="userAge">
              <a-input v-model="model.userAge" placeholder="请输入年龄"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="手机号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="userPhone">
              <a-input v-model="model.userPhone" placeholder="请输入手机号"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="工号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="userNum">
              <a-input v-model="model.userNum" placeholder="请输入工号"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="职位" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="userJob">
              <j-dict-select-tag type="list" v-model="model.userJob" dictCode="job" placeholder="请选择职位" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="身份证" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="userId">
              <a-input v-model="model.userId" placeholder="请输入身份证"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="人脸信息" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="userFace">
              <j-upload @change="setUserFaceImg" :number="num" v-model="model.userFace" file-type="image"  ></j-upload>
            </a-form-model-item>
          </a-col>
          <canvas style="display: none" id="myCanvas" width="100" height="100"></canvas>
          <img style="display: none" id="userFaceInfo" :src="imgSrcUrl" width="80" height="80"/>
          <!--{{imgSrcUrl}}-->
<!--          <a-col :span="24">-->
<!--            <a-form-model-item label="用户权限" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="permission">-->
<!--              <j-dict-select-tag type="list" v-model="model.permission" dictCode="permission" placeholder="请选择用户权限" />-->
<!--            </a-form-model-item>-->
<!--          </a-col>-->
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'
  import { postAction } from '@/api/manage'

  export default {
    name: 'UserInfoForm',
    components: {
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        model:{
         },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
           userPhone: [
              { required: false},
              { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码!'},
           ],
        },
        url: {
          add: "/userinfo/userInfo/add",
          edit: "/userinfo/userInfo/edit",
          queryById: "/userinfo/userInfo/queryById"
        },
        imgSrc: '',
        imgSrcUrl:'',
        num:1
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
      methods: {
          add() {
              this.edit(this.modelDefault)
          },
          edit(record) {
              this.model = Object.assign({}, record)
              this.visible = true
          },
          submitForm() {
              const that = this
              // 触发表单验证
              this.$refs.form.validate(valid => {
                  if (valid) {
                      that.confirmLoading = true
                      let httpurl = ''
                      let method = ''
                      if (!this.model.id) {
                          httpurl += this.url.add
                          method = 'post'
                      } else {
                          httpurl += this.url.edit
                          method = 'put'
                      }
                      this.param = {
                          userInfo:this.model,
                          imgSrc:this.imgSrc
                      }
                      // console.log(this.imgSrc)
                      httpAction(httpurl, this.param, method).then((res) => {
                          if (res.success) {
                              that.$message.success(res.message)
                              that.$emit('ok')
                          } else {
                              that.$message.warning(res.message)
                          }
                      }).finally(() => {
                          that.confirmLoading = false
                      })
                  }

              })
          },
          setUserFaceImg(img) {
              let that = this
              this.imgSrcUrl = window._CONFIG['domianURL']+"/sys/common/static/"+img
              let image = document.getElementById("userFaceInfo");
              image.setAttribute("crossOrigin","anonymous");
              image.onload = function(){
                  let canvas = document.getElementById("myCanvas");
                  let ctx = canvas.getContext("2d");
                  ctx.drawImage(image,0,0,100,100);
                  that.imgSrc = canvas.toDataURL("image/png");
              }
          },
      }
  }
</script>